<div class="clr-row">
  <div *ngIf="unitGroup"
       class="clr-col-xs-12	clr-col-sm-6	clr-col-md-6	clr-col-lg-6	clr-col-xl-6">

    <h5>
      这里集合了 {{unitGroup.name}}: {{unitsSpan}}
    </h5>

    <div *ngIf="hatchActionGrp">
      <span>操作性(平均数): </span>
      <p-slider [min]="0"
                [max]="100"
                [step]="0.01"
                [(ngModel)]="operativity"
                (onChange)="changeOperativity()"
                [disabled]="unitGroup.selected.length == 0"
                animate="true"></p-slider>
    </div>

    <app-action-group *ngIf="hatchActionGrp"
                      [actGr]="hatchActionGrp"></app-action-group>
    <app-action-group *ngIf="teamActionGrp && ms.game.researches.team2.done"
                      [actGr]="teamActionGrp"></app-action-group>
    <app-action-group *ngIf="twinActionGrp && ms.game.researches.twin.done"
                      [actGr]="twinActionGrp"></app-action-group>

  </div>
  <div class="clr-col-xs-12	clr-col-sm-6	clr-col-md-6	clr-col-lg-6	clr-col-xl-6">
    <h6> 统计: </h6>
    <clr-datagrid *ngIf="unitGroup"
                  class="datagrid-compact"
                  [(clrDgSelected)]="unitGroup.selected"
                  (clrDgSelectedChange)="selectedChanged($event)">

      <clr-dg-column [clrDgField]="'unit.name'">名称</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="unitQuantitySorter">
        <span *ngIf="!isSmall">数量</span>
        <span *ngIf="isSmall">Q. B.</span>
        <span *ngIf="team && isSmall">Te.</span>
        <span *ngIf="twin && isSmall">Tw.</span>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="unitBoughtSorter"
                     *ngIf="!isSmall">已购买</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="unitTeamSorter"
                     *ngIf="team && !isSmall">团队</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="unitTwinSorter"
                     *ngIf="twin && !isSmall">双胞胎</clr-dg-column>

      <clr-dg-row *clrDgItems="let unit of unitGroup.unlocked"
                  [clrDgItem]="unit">
        <clr-dg-cell>
          <a [routerLink]="'/nav/unit/'+unit.id">
            {{unit.name}}
          </a>
        </clr-dg-cell>
        <clr-dg-cell>
          <span *ngIf="!isSmall"
                class="monospace">{{unit.quantity | format: true}}</span>
          <span *ngIf="isSmall"
                class="monospace">
            {{unit.quantity | format: true}} - {{unit.buyAction?.quantity | format: true}}
            <span *ngIf="team && isSmall"
                  class="monospace">- {{unit.teamAction?.quantity | format: true}}</span>
            <span *ngIf="twin && isSmall"
                  class="monospace">- {{unit.twinAction?.quantity | format: true}}</span>
          </span>
        </clr-dg-cell>
        <clr-dg-cell *ngIf="!isSmall"
                     class="monospace">
          {{unit.buyAction?.quantity | format: true}}
        </clr-dg-cell>
        <clr-dg-cell *ngIf="team && !isSmall"
                     class="monospace">
          {{unit.teamAction?.quantity | format: true}}
        </clr-dg-cell>
        <clr-dg-cell *ngIf="twin && !isSmall"
                     class="monospace">
          {{unit.twinAction?.quantity | format: true}}
        </clr-dg-cell>
      </clr-dg-row>


    </clr-datagrid>

    <div class="pieContainer"
         #pieContainer>
      <!-- <canvas baseChart [data]="unitGroup.chartData" [labels]="unitGroup.chartLabels" [chartType]="'pie'"> -->
      <canvas #chart> </canvas>
    </div>

  </div>

</div>
